<template>
	<view>
		<view class="tab-height"></view>
		<view class="tab-bar">
			<view class="content">
				<view class="one-tab" v-for="(item, index) in tabBarList" :key="index"
					@click="selectTabBar(item.pagePath)">
					<view>
						<view class="tab-img">
							<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
							<image v-else class="img" :src="item.iconPath"></image>
						</view>
					</view>
					<view v-if="routePath === item.pagePath" class="tit selectTexts">{{ item.text }}</view>
					<view v-else class="tit texts">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 底部导航栏数据
			tabBarList: {
				type: Array,
				required: true,
				default: () => ([])
			},
			// 当前页面路径
			routePath: {
				type: String,
				required: true,
				default: ''
			}
		},
		data() {
			return {};
		},
		methods: {
			selectTabBar(path) {
				if (this.routePath == path) {
					return
				}

				this.$emit('onTabBar', path)
			}
		}
	};
</script>

<style lang="scss">
	.tab-height {
		width: 100%;
		height: 112rpx;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding-top: 10rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		background-color: #fff;

		.content {
			display: flex;

			.one-tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;

				.tab-img {
					width: 50rpx;
					height: 50rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.tit {
					font-size: 30rpx;
					transform: scale(0.7);
				}

				.selectTexts {
					color: block;
				}

				.texts {
					color: block;
				}
			}
		}
	}
</style>